<template>
  <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
    <div class="content_form">
      <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="100px">
        <el-form-item label="名称" prop="bannerName">
          <el-input v-model="dataForm.bannerName" placeholder="请输入轮播图名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sortNo">
          <el-input v-model="dataForm.sortNo" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="轮播图" prop="imgUrl" class="content_img">
          <ImageUpload :value="dataForm.imgUrl ? imgUrl + dataForm.imgUrl : dataForm.imgUrl" :uploadImgUrlType="'banner'" :isShowTip="false" @input="inputEventListener" />
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="dataForm.bannerUrl" placeholder="请输入跳转路径" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="dataForm.isShow">
            <el-radio
              v-for="dict in dict.type.is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addBanner, getBanner, updateBanner } from "@/api/product";

export default {
  name: "bannerAdd",
  dicts: ['is_show'],
  data () {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      dataForm: {
        bannerName: '',
        bannerId: undefined,
        imgUrl:'', // 图片地址
        bannerUrl: '', // 跳转地址
        isShow: '0',
        sortNo:'0'  //  排序
      },
      // 表单校验
      dataRules: {
        bannerName: [
          { required: true, message: '请输入轮播图名称', trigger: 'blur' },
        ],
        sortNo: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        imgUrl: [
          { required: true, message: '请上传轮播图', trigger: 'change' },
        ],
        // bannerUrl: [
        //   { required: true, message: '请上传轮播图', trigger: 'change' },
        // ]
      },
      agencyList: []
    }
  },
  methods: {
    init(e) {
      this.reset();
      this.open = true;
      this.title = e ? "编辑轮播图" : "添加轮播图";
      this.dataForm.bannerId = e || undefined
      if (e) return this.handleUpdate(e)
    },
    // 表单重置
    reset () {
      for (var key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = []
        } else {
          this.dataForm[key] = ''
        }
      }
      this.dataForm.isShow = '0'
      this.resetForm("ruleForm");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getBanner(row).then(res => {
        const { code, data, msg } = res
        if (code != 200) return this.$modal.msgError(msg);
        this.dataForm = { ...data }
        this.dataForm.isShow = data.isShow + ''
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const api = this.dataForm.bannerId ? updateBanner(this.dataForm) : addBanner(this.dataForm)
          api.then(res => {
            const { code, msg } = res
            if (code !== 200) return this.$modal.msgError(msg);
            this.dataForm.bannerId ? this.$modal.msgSuccess("修改成功") : this.$modal.msgSuccess("添加成功")
            this.open = false;
            this.$emit('eventUpdata')
          })
        }
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    inputEventListener (event) {
      this.dataForm.imgUrl = event
    }
  }
}
</script>
